import React from "react";
import {SafeAreaView, Text, TextInput, TouchableOpacity, View} from "react-native";
import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";
import Button from "react-native-button";

import styles from "./style";
import NavigationService from "../../components/NavigationService";
import {Icon} from "../../components/AroIconfont";
import colors from "../../styles/colors";


export default (self, loginParams) => (
  <SafeAreaView style={styles.safeAreaContainer}>
    <View style={styles.container}>
      <View style={styles.headerWrap}>
        <TouchableOpacity onPress={() => NavigationService.navigate(self.props.navigation.state.params.prev)}>
          <View style={styles.headerLeftText}>
            <Icon name={'aroIcon|iconclose'} size={14} color={colors.iconGray}/>
          </View>
        </TouchableOpacity>
        <Text style={styles.headerRightText} onPress={() => self.props.navigation.navigate('Register')}>
          新用户注册
        </Text>
      </View>
      <KeyboardAwareScrollView keyboardShouldPersistTaps="handled" enableOnAndroid={true}>
        <View style={styles.keyboardContainer}>
          <Text style={styles.titleText}>用户登录</Text>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='手机号/邮箱'
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                loginParams.m_name = text;
                self.props.loginButtonState()
              }}
              autoFocus
            />
          </View>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='密码'
              secureTextEntry={true}
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                loginParams.m_pwd = text;
                self.props.loginButtonState()
              }}
            />
          </View>
          <View style={styles.buttonWrap}>
            <Button
              style={styles.buttonItem}
              containerStyle={styles.buttonPlugIn}
              disabledContainerStyle={styles.buttonDisabledPlugIn}
              disabled={self.props.loginButtonDisabled}
              onPress={() => self.props.memberLogin(loginParams)}
            >登录</Button>
          </View>
          <Text style={styles.forgetText} onPress={() => self.props.navigation.navigate('Forget')}>
            忘记密码？
          </Text>
        </View>
      </KeyboardAwareScrollView>
    </View>
  </SafeAreaView>
);